<template>
  <div class="table-container">
    <el-table v-if="false"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="180"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      />
      <el-table-column
        prop="address"
        label="地址"
      />
    </el-table>

    <el-row :gutter="20" style="padding: 20px 20px">
      <el-col :span="7">
        <el-table :data="weekSchool" max-height="840px" border>
          <el-table-column label="周数" width="100" align="center" prop="date"/>
          <el-table-column label="周开始日期" width="120" align="center" prop="dateStart"/>
          <el-table-column label="周结束日期" width="120" align="center" prop="dateEnd"/>
          <el-table-column label="校区" align="center" prop="school"/>
          <el-table-column label="次数" width="60" align="center" prop="count"/>
        </el-table>
      </el-col>

      <el-col :span="8">
        <el-table :data="weekStudent" max-height="840px" border>
          <el-table-column label="周数" width="100" align="center" prop="date"/>
          <el-table-column label="周开始日期" width="120" align="center" prop="dateStart"/>
          <el-table-column label="周结束日期" width="120" align="center" prop="dateEnd"/>
          <el-table-column label="校区" width="100" align="center" prop="school"/>
          <el-table-column label="学生" align="center" prop="name"/>
          <el-table-column label="次数" width="60" align="center" prop="count"/>
        </el-table>
      </el-col>

      <el-col :span="4">
        <el-table :data="monthSchool" max-height="840px" border>
          <el-table-column label="年月"  align="center" prop="date"/>
          <el-table-column label="校区" width="100" align="center" prop="school"/>
          <el-table-column label="次数" width="60" align="center" prop="count"/>
        </el-table>
      </el-col>

      <el-col :span="5">
        <el-table :data="monthStudent" max-height="840px" border>
          <el-table-column label="年月"  align="center" prop="date"/>
          <el-table-column label="校区" width="100" align="center" prop="school"/>
          <el-table-column label="学生" align="center" prop="name"/>
          <el-table-column label="次数" width="60" align="center" prop="count"/>
        </el-table>
      </el-col>

    </el-row>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElPagination, ElButton } from 'element-plus';
import {statisticsDataMore} from "@/api/word/wordRecord.js";

// 表格数据
const tableData = ref(Array.from({ length: 10 }, (_, index) => ({
  date: `2023-0${(index % 9) + 1}-${(index % 28) + 10}`,
  name: `用户${index + 1}`,
  address: `地址${index + 1} 街道信息`
})));

const statistics = ref({});
const monthStudent = ref([]);
const monthSchool = ref([]);
const weekSchool = ref([]);
const weekStudent = ref([]);
// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(50);

const initData = () => {
  statisticsDataMore().then(res => {
    if (res.code === 200) {
      console.log(res);
      weekSchool.value = res.data.weekSchool
      weekStudent.value = res.data.weekStudent
      monthSchool.value = res.data.monthSchool
      monthStudent.value = res.data.monthStudent
    }
  })
}
onMounted(() => {
  initData();
})

// 分页事件
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  pageSize.value = val;
  currentPage.value = 1;
};

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
};

// 左侧按钮事件
const handleAdd = () => {
  console.log('点击新增按钮');
  // 新增逻辑
};

const handleExport = () => {
  console.log('点击导出按钮');
  // 导出逻辑
};

const handleRefresh = () => {
  console.log('点击刷新按钮');
  // 刷新逻辑
};
</script>

<style scoped>
.table-container {
  margin: 20px auto;
  padding: 0 20px;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: space-between;  /* 左右布局 */
  align-items: center;             /* 垂直居中 */
  margin-top: 15px;
  padding: 10px 0;
}

/* 左侧按钮区域 */
.pagination-actions {
  display: flex;
  gap: 8px;  /* 按钮之间的间距 */
}

/* 适配小屏幕 */
@media (max-width: 768px) {
  .pagination-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .pagination-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .el-pagination {
    width: 100%;
    justify-content: center;
  }
}
</style>
